<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./lib/vue.js"></script>
        <title>03 vue条件渲染</title>
    </head>
    <body>
        <div id="app">
            <!-- v-if和v-else之间不能有其他元素，否则失效 -->
            <button @click="handleClick()">click</button>
            <div v-if="isCreated">当前isCreated值为：true</div>
            <div v-else>当前isCreated值为：false</div>

            <br />
            <hr />
            <br />

            <ul v-if="items.length > 0">
                <!-- 在实际项目中:key设置为数据唯一id，vue通过:key的对比关系操作dom -->
                <li v-for="(item, index) in items" :key="item">{{ item }}</li>
            </ul>
            <div v-else>
                items数组为空，不显示列表
            </div>

            <br />
            <hr />
            <br />

            <div v-if="num === 1">111111</div>
            <div v-else-if="num === 2">222222</div>
            <div v-else>xxxxxx</div>

            <br />
            <hr />
            <br />

            <!-- @input当输入变化触发，@change当失去焦点触发，v-model获取当前value值 -->
            搜索数组关键字：
            <input type="text" @input="handleInput()" v-model="mytext" />
            <ul>
                <li v-for="(item, index) in dataList">
                    {{ item }}
                </li>
            </ul>

            <br />
            <hr />
            <br />

            <!-- 计算属性实现 -->
            搜索数组关键字：
            <input type="text" v-model="mytext" />
            <ul>
                <li v-for="(item, index) in getDataList">
                    {{ item }}
                </li>
            </ul>
        </div>

        <script>
            const vm = new Vue({
                el: '#app',
                data() {
                    return {
                        isCreated: true,
                        /*
                        使用items[0]='ccc';vue不会渲染页面
                        需使用Vue.set(items, 0, 'ccc');修改数据会直接被vue渲染到页面
                        */
                        items: ['aaa', 'bbb'],
                        num: 1,
                        mytext: '',
                        dataList: ['aaa', 'bbb', 'ccc', 'aad', 'abc', 'bct', 'ace', 'ahg', 'bbo', 'cct'],
                        dataList2: ['aaa', 'bbb', 'ccc', 'aad', 'abc', 'bct', 'ace', 'ahg', 'bbo', 'cct']
                    };
                },
                methods: {
                    handleClick() {
                        this.isCreated = !this.isCreated;
                        if (this.isCreated) {
                            this.items = ['aaa', 'bbb'];
                        } else {
                            this.items = [];
                        }
                    },
                    handleInput() {
                        let newList = this.dataList2.filter((item) => item.indexOf(this.mytext) > -1);
                        this.dataList = newList;
                    }
                },
                computed: {
                    getDataList() {
                        return this.dataList.filter((item) => item.indexOf(this.mytext) > -1);
                    }
                }
            });
        </script>
    </body>
</html>
